<template>
	<div class="rank_box">
		<div class="head">
			<h2>{{ rankTitle }}</h2>
			<span>TOP5</span>
			<em></em>
		</div>
		<div class="cont"></div>
	</div>
</template>

<script>
export default {
	props: {
		rankTitle: String,
		rankData: {
			type: Array,
			default() {
				return [];
			}
		}
	}
};
</script>

<style lang="scss" scoped>
.rank_box {
	height: 475px;
	padding: 20px;
	border-radius: 8px;
	background: linear-gradient(180deg, #fff1f1 0%, #fff 16%);
	.head {
		display: flex;
		align-items: center;
		h2 {
			font-size: 20px;
			line-height: 1;
			color: var(--primary);
			margin-right: 10px;
		}
		span {
			font-size: 16px;
			line-height: 1;
			color: var(--primary);
			margin: 6px 10px 0 0;
		}
		em {
			position: relative;
			flex: 1;
			height: 7px;
			margin-top: 6px;
			border-right: solid 1px #e7e7e7;
			&::before {
				position: absolute;
				top: 3px;
				right: 3px;
				left: 0;
				content: '';
				border-top: solid 1px #e7e7e7;
			}
			&::after {
				position: absolute;
				top: 0;
				right: 3px;
				width: 0;
				height: 100%;
				content: '';
				border-right: solid 1px #e7e7e7;
			}
		}
	}
}
</style>
